<template>
  <div class="layout_left" name="">
    <div class="layout_left_box">
      <!-- 修复样式bug -->
      <div></div>
      <!-- 别动 -->
      <ul>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/kanban">看板</router-link>
          </div>
        </li>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/circuit">线路管理</router-link>
          </div>
        </li>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/distribution">分销管理</router-link>
          </div>
        </li>
        <li @click.self="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/tourguide">导游管理</router-link>
          </div>
        </li>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/order">订单管理</router-link>
          </div>
        </li>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/asset">资产管理</router-link>
          </div>
        </li>
        <li @click="checkLog($event)">
          <div class="layout_left_item">
            <router-link to="/setting">基础设置</router-link>
          </div>
        </li>
      </ul>
    </div>
    <!-- 二级导航栏 -->
  </div>
</template>

<script>
import "@/global-style/style.less";
import siderBarcontrll from "@/mixins/siderbar.js";
export default {
  mixins: [siderBarcontrll],
  data() {
    return {
      opencss: false,
      element: [
        {
          text: "看板",
          id: 0,
        },
        {
          text: "线路管理",
          path: "circuit",
          id: 1,
        },
        {
          text: "分销管理",
          path: "distribution",
          id: 2,
        },
        {
          text: "导游管理",
          path: "tourguide",
          id: 3,
        },
        {
          text: "订单管理",
          path: "order",
          id: 4,
        },
        {
          text: "资产管理",
          path: "asset",
          id: 5,
        },
        {
          text: "基础设置",
          path: "setting",
          id: 6,
        },
      ],
      // 二级
      child: [
        {
          text: "合作导游",
          path: "tourguide/coopguide",
          id: 31,
        },
        {
          text: "导游审核",
          path: "tourguide/tourguideaudit",
          id: 32,
        },
      ],
    };
  },
};
</script>

<style lang='less'>
div.layout_left {
  height: 100vh;
  overflow: hidden;
}
div.layout_left {
  width: 9vw;
  overflow: hidden;
  background-color: #666666;
}
.layout_left_box {
  color: #fff;
  position: relative;
  margin-top: 5vh;
  height: 95vh;
  width: 9vw;

  & > div:first-child {
    padding-top: 10vh;
  }
  a {
    display: block;
    padding: 0 2.4vh;
    text-decoration: none;
    color: #fff;
  }
}
.layout_left_item {
  height: 5.4vh;
  line-height: 5.4vh;
  text-align: left;
  margin: 1.5vh 0;
  // background-color: #ccc;

  &:hover {
    background-color: #07c160;
  }
  .active {
    background-color: #07c160;
  }
}
</style>